<template>
    <div id="main" style="height: 500px; width: 100%" v-loading="load">

    </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
import "echarts-wordcloud";

export default {
    name: "WordChart",
    data() {
        return {
            load: true,
            option: {
                series: [
                    {
                        type: "wordCloud",
                        sizeRange: [12, 60],
                        rotationRange: [-90, 90],
                        rotationStep: 45,
                        gridSize: 15,
                        shape: "pentagon",
                        width: "100%",
                        height: "100%",
                        drawOutOfBound: true,
                        textStyle: {
                            color: function () {
                                return (
                                    "rgb(" +
                                    [
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160),
                                    ].join(",") +
                                    ")"
                                );
                            },
                        },
                        emphasis: {
                            textStyle: {
                                shadowBlur: 10,
                                shadowColor: "#333",
                                color: "red",
                            },
                        },
                    },
                ],
            }
        }
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            this.chartType = this.$route.query.type;
            this.title = this.$route.query.title;
            this.chartQuery()
        },
        chartQuery() {
            this.load = true;
            let chartType = this.chartType;
            axios.get(`http://152.136.191.171:9243/job/proportion/${chartType}`).then(resp => {
                let chartDom = document.getElementById('main');
                let myChart = echarts.init(chartDom);
                let wordData = resp.data.data;
                console.log(wordData)
                this.option.series[0].data = Object.keys(wordData).map(key => ({name: key, value: wordData[key]}));
                myChart.setOption(this.option);
                this.load = false;
            })
        }
    },
    beforeRouteUpdate(to, from, next) {
        // 在路由参数更新时执行某个方法
        this.chartType = to.query.type;
        this.title = to.query.title;
        this.chartQuery();
        next();
    }
}
</script>

<style scoped>

</style>